<template>
  <div>
    <div style="margin-left:10%; font-size: 24px;">基础信息
      <!-- <button @click="cik()">aaa</button> -->
    </div>
    <div>
      <el-form :model="form" label-width="auto" style="width: 100%">
        <el-row>
          <el-col :span="10">
            <el-form-item label="市场">
              <el-select v-model="form.market" placeholder="请选择内销或外销" size="default" style="width: 240px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="国家">
              <el-select v-model="form.country" placeholder="内销为省市区,外销为国家" size="default" style="width: 240px">
                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="公司名称">
              <el-input v-model="form.company" style="width: 240px" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="机型">
              <el-input v-model="form.model" style="width: 240px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="客户联系人">
              <el-input v-model="form.contacts" style="width: 240px" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="客户联系手机">
              <el-input v-model="form.phone" style="width: 240px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="客户邮箱">
              <el-input v-model="form.email" style="width: 240px" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="老板联系人">
              <el-input v-model="form.boss" style="width: 240px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="老板联系手机">
              <el-input v-model="form.bossPhone" style="width: 240px" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="老板邮箱">
              <el-input v-model="form.bossEmail" style="width: 240px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="联系地址">
              <el-input v-model="form.adderss" style="width: 240px" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="客户目的港口">
              <el-input v-model="form.targetPort" style="width: 240px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="客户分类">
              <el-select v-model="form.segmentation" placeholder="Select" style="width: 240px">
                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="客户类型">
              <el-select v-model="form.customerType" placeholder="合作客户/潜在客户" style="width: 240px">
                <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="公司简介">
              <el-input autosize v-model="form.companyProfile" style="width: 100%; height: 50px;" :rows="4" type="textarea"
                placeholder="Please input" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="客户目的地">
              <el-input v-model="form.destination" style="width: 240px" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="目的地和快递地址是否一致">
              <el-radio-group v-model="form.consistent">
                <el-radio value="1" size="large">一致</el-radio>
                <el-radio value="2" size="large">不一致</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="快递地址">
              <el-input v-model="form.courierAddress" style="width: 240px" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="成交或者询价产品">
              <el-checkbox-group v-model="checkList">
                <el-checkbox value="配件" label="配件" />
                <el-checkbox value="固定设备" label="固定设备" />
                <el-checkbox value="移动设备" label="移动设备" />
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="margin-left:10%; font-size: 24px;">基础信息</div>
    <div style="margin-top: 20px;">
      <el-form :model="form" label-width="auto" style="max-width:100%">
        <el-form-item label="归属销售" style="margin-left: 9%;">
          <el-input v-model="form.saleId" style="width: 240px" />
        </el-form-item>
        <el-form-item label="账号" style="margin-left: 9%;">
          <el-input v-model="form.account" style="width: 240px" disabled />
        </el-form-item>
        <el-form-item label="密码" style="margin-left: 9%;">
          <el-input v-model="form.password" style="width: 240px" type="password" disabled />
        </el-form-item>
        <el-form-item label="密码验证手机号" style="margin-left: 9%;">
          <el-input v-model="form.verifyPhone" style="width: 240px" />
        </el-form-item>
      </el-form>
    </div>
    <el-button style="margin-left: 70%;" type="primary" round @click="updated()">保存</el-button>
    <el-button type="info" round @click="back()">取消</el-button>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted } from 'vue'
import { queryById, update } from "@/api/customer.ts";
//钩子函数
onMounted(() => {
  initData();
})
var router = useRouter();
//接受页面跳转传递数据
var id = useRoute().query;
//测试后得到传递数据--id
console.log(id);
//取消返回客户管理页面
function back() {
  router.push({ name: "customerManager"});
}
//复选框列表
const checkList = ref([])
function cik() {
  //传统死方法
  // console.log(checkList.value);
  // var a = "";
  // checkList.value.forEach(e => {
  //   // console.log(e)
  //   a = a + e + " "; 
  // });
  // form.value.products = a;
  // console.log(form.value.products);

//老师讲的新方法
form.value.products = checkList.value.join(" ");//好方法
console.log(form.value.products);


}
//保存数据
function updated() {
  // alert("保存数据");
  cik()
  form.value.market = form.value.market == "内销" ? 1 : 2
  console.log(form.value)
  var date = JSON.stringify(form.value);
  update(date);
  router.push({ name: "customerManager" });
}
//接收数据的对象
var form = ref([])
//页面加载获取数据
async function initData() {
  
  var res = await queryById(id);
  form.value = res.data;

  form.value.market = form.value.market == '1' ? "内销" : "外销"
  //打印前端返回对象
  // console.log(form.value);

}
//市场复选框
const options = [
  {
    value: '1',
    label: '内销',
  },
  {
    value: '2',
    label: '外销',
  }
]
//国家复选框
const options1 = [
  {
    value: '1',
    label: '省市区',
  },
  {
    value: '2',
    label: '国家',
  }
]
//客户分类复选框
const options2 = [
  {
    value: '1',
    label: '小型最终用户',
  },
  {
    value: '2',
    label: '大型最终用户',
  }
]
//客户类型复选框
const options3 = [
  {
    value: '1',
    label: '合作客户',
  },
  {
    value: '2',
    label: '潜在客户',
  }
]
</script>

<style scoped>
.el-col {
  margin: left 7%;
}

.el-row {
  margin: 20px
}
</style>
